<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 选择省份 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container" v-if="loadEnd">
		<scroll-view class="container-main" :scroll-into-view="selectInitial" scroll-y>
			<view class="main-column">
				<view class="column-current">
					<view class="current-title">当前定位</view>
					<view class="current-info flex align-items-center">
						<view class="info-name flex-item" @click="handleSelect(currentLocation)">{{ currentLocation.city || '定位中' }}</view>
						<view class="info-rest flex align-items-center" @click="getAuthSetting()">
							<image class="rest-icon" src="/static/reset.png" mode="aspectFit"></image>
							<view class="rest-btn">重新定位</view>
						</view>
					</view>
				</view>
				<view class="column-list">
					<view class="list-item" v-for="item in provinceList" :key="item.first" :id="item.first">
						<view class="item-initial" :style="{color: themeColor}">{{ item.first }}</view>
						<view class="item-province">
							<view class="province-cell" v-for="(city, index) in item.data" :key="index" @click="selectAddress(city)">{{ city.shortname }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="safe-padding"></view>
		</scroll-view>
		<view class="container-sidebar flex-column">
			<view class="sidebar-item" v-for="group in provinceList" :key="group.first" @touchstart.stop.prevent="onTouchStart(group.first)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
				{{ group.first }}
			</view>
		</view>
		<view class="container-label" v-if="isShowLabel">{{ selectInitial }}</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'

	export default {
		data() {
			return {
				// 页面是否阻止滚动
				pageShow: false,
				// 加载完成
				loadEnd: false,
				// 是否重新定位
				isResetLocation: false,
				// 省份列表
				provinceList: [],
				// 已选首字母
				selectInitial: '',
				// 是否显示标签
				isShowLabel: false,
				// 默认地址信息
				defaultAddress: {
					city: '北京市',
					latitude: '39.90',
					longitude: '116.41',
				},
				// 当前定位信息
				currentLocation: {
					city: '',
					latitude: '',
					longitude: '',
				},
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				currentCity: state => state.app.currentCity,
				tencentMapKey: state => state.app.tencentMapKey,
			}),
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.getProvinceList(() => {
				this.loadEnd = true
				uni.hideLoading()
				this.$nextTick(() => {
					if (uni.getStorageSync('currentCity')) {
						this.defaultAddress = uni.getStorageSync('currentCity')
					} else {
						this.getAuthSetting()
					}
				})
			})
		},
		onReady() {
			this.currentLocation = this.currentCity
		},
		onShow() {
			if (this.isResetLocation) {
				this.isResetLocation = false
				this.getAuthSetting()
			}
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.pageShow = state
			},
			// 获取省份列表
			getProvinceList(fn) {
				this.$util.request("main.address.province").then(res => {
					if (fn) fn()
					if (res.code == 1) {
						this.provinceList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取省份列表 ', error)
				})
			},
			// 选择地址
			selectAddress(item) {
				if (item.shortname.indexOf("北京") > -1 || item.shortname.indexOf("重庆") > -1 || item.shortname.indexOf("上海") > -1 || item.shortname.indexOf("天津") > -1) {
					this.handleSelect({
						province: item.shortname,
						city: item.shortname,
						latitude: item.lat,
						longitude: item.lng,
					})
				} else {
					this.$util.toPage({
						mode: 1,
						path: '/pages/public/select/city?id=' + item.id + '&name=' + item.shortname,
					})
				}
			},
			// 触摸页面开始
			onTouchStart(index) {
				this.selectInitial = index
				this.isShowLabel = true
			},
			// 触摸页面结束
			onTouchStop() {
				this.isShowLabel = false
			},
			// 获取位置权限
			async getAuthSetting() {
				try {
					const permissionStatus = await this.$util.checkLocationPermission()
					if (permissionStatus == 1) {
						this.restLocation()
					} else {
						this.$util.setLocationPermission(permissionStatus, (result) => {
							if (result) {
								// #ifdef MP-WEIXIN
								this.restLocation()
								// #endif
								// #ifdef APP
								this.isResetLocation = true
								// #endif
							} else {
								this.currentLocation = this.defaultAddress
							}
						})
					}
				} catch (error) {
					this.currentLocation = this.defaultAddress
					uni.showToast({
						title: error.message,
						icon: 'none',
						duration: 2000,
					})
				}
			},
			// 获取当前位置坐标
			restLocation() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				this.currentLocation = {
					city: '',
					latitude: '',
					longitude: '',
				}
				var qqmapsdk = new QQMapWX({
					key: this.tencentMapKey
				})
				qqmapsdk.reverseGeocoder({
					success: (res) => {
						uni.hideLoading()
						const address = res.result.ad_info;
						this.currentLocation = {
							latitude: address.location.lat,
							longitude: address.location.lng,
							province: address.province,
							city: address.city,
						}
					},
					fail: () => {
						this.currentLocation = this.defaultAddress
						uni.showToast({
							title: '位置获取失败',
							icon: 'none',
							duration: 2000,
						})
					},
				})
			},
			// 选择城市
			handleSelect(address) {
				if (!address.city) return
				this.$store.commit('app/setCurrentCity', address)
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.container {
		height: 100vh;

		.container-main {
			height: 100%;

			.main-column {
				padding: 32rpx;

				.column-current {
					border-radius: 16rpx;
					background: #fff;
					padding: 32rpx;

					.current-title {
						color: #8d929c;
						font-size: 24rpx;
						line-height: 34rpx;
					}

					.current-info {
						margin-top: 24rpx;

						.info-name {
							margin-left: 8rpx;
							color: #242629;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}

						.info-rest {
							margin-left: 8rpx;

							.rest-icon {
								width: 32rpx;
								height: 32rpx;
							}

							.rest-btn {
								margin-left: 8rpx;
								color: #8d929c;
								font-size: 28rpx;
								line-height: 40rpx;
							}
						}
					}
				}

				.column-list {
					border-radius: 16rpx;
					background: #fff;
					padding: 32rpx;
					margin-top: 32rpx;

					.list-item {
						.item-initial {
							font-size: 24rpx;
							line-height: 48rpx;
							background: linear-gradient(90deg, #f6f7f8 0%, rgba(255, 255, 255, 0) 100%);
							padding: 0 30rpx;
						}

						.item-province {
							padding: 6rpx 0;

							.province-cell {
								color: #242629;
								font-size: 28rpx;
								line-height: 50rpx;
								padding: 12rpx 30rpx;
							}
						}
					}
				}
			}
		}

		.container-sidebar {
			position: fixed;
			top: 50%;
			right: 8rpx;
			transform: translateY(-50%);
			border-radius: 24rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.1);
			background: #fff;
			padding: 24rpx 0;

			.sidebar-item {
				color: #242629;
				text-align: center;
				font-size: 28rpx;
				line-height: 50rpx;
				padding: 0 12rpx;
			}
		}

		.container-label {
			position: fixed;
			top: 50%;
			right: 72rpx;
			z-index: 99;
			margin-top: -60rpx;
			width: 120rpx;
			height: 120rpx;
			font-size: 50rpx;
			color: #fff;
			border-radius: 24rpx;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>